import React,{ Component } from 'react';
import { Table, Button , Space ,Modal,Form, Input,message,Popconfirm} from 'antd';
import './index.css';
import {findAllDrug,drugdel,changeDrug} from "../../Axios";
class DrugAllMain extends Component {
    formRef = React.createRef();
    constructor(props) {
        super(props);
        this.state = { 
            visible:false,
            data:[],
            //修改后的值
            newValue:null
        }
    }
    //收到搜索的值
    componentWillReceiveProps(nextProps) {
        this.setState({ data: nextProps.data });
    }
    //打开界面时请求数据
    async componentWillMount() {
        let data = await findAllDrug();
        this.setState(data);
    }
    columns = [
        {
          title: '药品名称',
          dataIndex: 'name',
          key: 'name',
          align: 'center'
        },{
          title: '库存',
          dataIndex: 'inventory',
          key: 'inventory',
          align: 'center'
        },{
          title: '价格',
          dataIndex: 'price',
          key: 'price',
          align: 'center'
        },{
          title: '种类',
          key: 'type',
          dataIndex: 'type',
          align: 'center'
        },{
          title: '操作',
          key: 'action',
          align: 'center',
          render: (text, record,index) => {
            return (<Space size="middle">
                <Button type="primary" onClick={this.showModal.bind(this,text)}>修改</Button>
                <Popconfirm 
                    title="确定删除这一项吗？"
                    okText="确定"
                    cancelText="取消"
                    onConfirm={()=>this.SureDel()}
                    onCancel={this.CancelDel}
                ><Button type="primary" onClick={this.DelIndex.bind(this,text)} danger>删除</Button>
                </Popconfirm>
            </Space>
          )},
        },
      ];
      //删除按钮的操作
      DelIndex = (text)=>{
        this.deleteId = text.durgId;
      }
      CancelDel(){
          message.warning('用户取消');
      }
      async SureDel(){
        let Delres =  await drugdel({id:this.deleteId});
        // if(){

        // }
        let data = await findAllDrug();
        this.setState(data);
        //   this.setState({data:obj},()=>console.log(this.state.data));
      }
      


    //修改按钮的操作
    showModal = (text)=>{
        this.formRef.current.setFieldsValue({
            drugId:text.drugId,
            name:text.name,
            inventory:text.inventory,
            price:text.price,
            type:text.type,
        });
        this.setState({
            visible: true,
        });
    }
    //提示信息
    messageTip(type){
        switch(type){
            case 'success':
                message.success('修改成功!');
                break;
            case 'error':
                message.error('操作出错，请稍后再试！');
                break;
            case 'warning':
                message.warning('未作出任何更改!');
                break;
            default:break;
        }
    }
    //确定修改的操作
    async handleOk(){
        // this.messageTip('success');
        let res = await changeDrug({value:this.state.newValue});
        let data = await findAllDrug();
        this.setState({
            visible: false,
            data
        });
    }
    //取消修改的操作
    handleCancel(){
        this.messageTip('warning');

        this.setState({
            visible: false,
            newValue:null
        });
    }


    render() { 
        return (
            <div>
                <Table columns={this.columns} dataSource={this.state.data} className='DrugAllMain_table'/>
                <Modal
                    title="修改内容"
                    centered
                    visible={this.state.visible}
                    okText='确认'
                    cancelText='关闭'
                    onOk={() => this.handleOk()}
                    onCancel={() => this.handleCancel()}
                    width={600}
                    forceRender = {true}
                >
                 <Form name="drug_form" ref={this.formRef} initialValues={{ 'drug_form_name': 'true' }} layout='horizontal' onValuesChange={(changeval,allval)=>this.setState({ newValue: allval })}>
                    <Form.Item label='药品编号' name='drugId'><Input disabled/></Form.Item>
                    <Form.Item label='药品名称' name='name'><Input /></Form.Item>
                    <Form.Item label='库存' name='inventory'><Input /></Form.Item>
                    <Form.Item label='价格' name='price'><Input /></Form.Item>
                    <Form.Item label='种类' name='type'><Input /></Form.Item>
                 </Form>
                </Modal>
            </div>
        );
    }
}
 
export default DrugAllMain;